<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/**
			 * 第一个子元素
			 * 是第一个p元素，并且本身还是p
			 * - 如果不写p，那么表示第一个子元素
			 * :last-child 最后一个子元素
			 */
			p:first-child{
				background-color: yellow;
			}
			/**
			 * 如果不写p，那么表示第一个子元素
			 * 也可以写*
			 */
			/* *:first-child{
				background-color: red;
			} */
			body > p:first-child{
				background-color: green;
			}
			/**
			 * 可以选中任意位置的子元素，例如：3
			 * 如果参数是 even/odd 那么就 偶数/奇数 位置改变
			 */
			p:nth-child(3){
				background-color: pink;
			}
			/**
			 * 所有p元素中的第一个，下面这两个也一样。
			 * :first-of-type 
			 * :nth-of-type
			 */
			p:first-of-type{
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<span>HELLO</span>
		<p>111111111111111111</p>
		<p>111111111111111111</p>
		<p>111111111111111111</p>
		<p>111111111111111111</p>
		<!-- 这个仍然是黄色背景，因为是div的第一个子元素 -->
		<div id="">
			<p>22222222</p>
		</div>
	</body>
</html>
